<template lang='pug'>
.table-content
  .table-header
    h4.title-label 子表单列表
  .table-content
    el-radio-group(v-model="checkLabel",size="small")
      //- el-radio-button(label="子表")
      el-radio-button(v-for="(cell, index) in subForms",:key="index",:label="cell.label")
    .content-detail
      DataTables.dataTables(
        ref="DataTables"
        :columns="columns"
        :hasPage="false"
        :tableData="tableData"
        :operationList="operationList"
        :operationWidth="100"
        :toolbarList="toolBar"
        :viewer="viewer"
        :tableInitList="tableList"
        :tableFullList="tableList")
      SmartDialog(v-model="isShowTool",title="新增信息",size="lg")
        SmartForm.m-2.container(:formList="tableList",:columns="columns",:buttonList="toolBtns")
      SmartDialog(v-model="isShowUpdate",title="编辑信息",size="lg")
        SmartForm.container.m-2(:formList="tableList",:columns="columns",:values="updateValues",:buttonList="updateBtns")
</template>

<script>
/**
 * @name 流程审批 - 子表单
 * @author linmn
 * @TODO目前仅部分支持多子表
 */
import DataTables from '@/components/Datatables'
import SmartDialog from '@/components/SmartDialog'
import SmartForm from '@/components/SmartForm'
import {mapValues, intersectionWith, keyBy} from 'lodash' // intersectionWith
import {operationDelete, operationUpdate} from '@/containers/DataTablePage/operation'
export default {
  name: 'SubFormStep',
  props: {
    subForms: {
      type: Array,
      default: () => ([])
    },
    subDatas: {
      type: Object,
      default: () => ({})
    },
    curInstance: {
      type: Object,
      default: () => ({})
    },
    full: {
      type: Array,
      default: () => ([])
    } // 整条流程所有子表数据
  },
  components: {
    DataTables,
    SmartDialog,
    SmartForm
  },
  mounted () {
    // this.initForm()
  },
  data () {
    const allcurStepDIds = Object.values(mapValues(this.curInstance, 'stepDefineId'))
    return {
      subformKey: '',
      tableData: [],
      allSubStepDIds: this.subForms[0].subStepDefinedIds, // 所有子表中定义节点id
      allcurStepDIds: allcurStepDIds, // 所有当前实例的定义节点id数组
      operationList: [{
        ...operationUpdate,
        isShow: (data) => {
          // 目前针对1个子表
          // 需要判断当前子表是否允许当前人员操作
          return this.hasRightToEdit
        },
        func: ({funcProps}) => {
          const {data} = funcProps
          this.isShowUpdate = true
          this.updateValues = data
          // this.isShowUpdate = true
        }
      }, {
        ...operationDelete,
        isShow: (data) => {
          // 需要判断当前子表是否允许当前人员操作
          return this.hasRightToEdit
        },
        func: ({funcProps}) => {
          const {data} = funcProps
          this.$emit('delete', {
            data: data,
            subName: this.subForms[0].name,
            formDId: this.subForms[0].subFormId,
            flowInsId: this.flowInstanceId
          })
        }
      }],
      toolbarList: [{
        label: '新增',
        func: ({funcProps}) => {
          this.isShowTool = true
        }
      }],
      toolBtns: [{
        label: '确定新增',
        type: 'complete',
        validate: true,
        func: ({funcProps}) => {
          const {formValues} = funcProps.form
          this.$emit('create', {
            data: formValues,
            subName: this.subForms[0].name,
            formDId: this.subForms[0].subFormId,
            flowInsId: this.flowInstanceId})
        }
      }],
      updateValues: {},
      updateBtns: [{
        label: '确认修改',
        type: 'complete',
        validate: true,
        func: ({funcProps}) => {
          const {formValues} = funcProps.form
          // console.log('formValues:', formValues)
          // 传播子表数据及对应的子表字段名称 TODO 多个子表
          this.$emit('update', {
            data: formValues,
            subName: this.subForms[0].name,
            formDId: this.subForms[0].subFormId,
            flowInsId: this.flowInstanceId})
        }
      }],
      isShowTool: false, // 显示新增按钮
      isShowUpdate: false, // 显示更新的按钮
      checkLabel: this.subForms.length ? this.subForms[0].label : null,
      instaceId: null
      // subFormInsId: null // 记录当前查看子流程的流程
    }
  },
  watch: {
    subDatas (datas) {
      this.initForm()
    }
  },
  computed: {
    formDefinedId () {
      // 这里多条实例的情况下无法判断是对应哪个子表 TODO 需要修改
      const fullKeyByDefind = keyBy(this.full, 'stepDefineId')
      return fullKeyByDefind[this.allcurStepDIds[0]].formDefineId
    },
    flowInstanceId () {
      return this.$route.query.flow
    },
    hasRightToEdit () {
      const _hasClip = intersectionWith(this.allcurStepDIds, this.subForms[0].subStepDefinedIds, (pre, item) => {
        return Number(pre) === Number(item)
      })
      return _hasClip.length > 0
    },
    columns () {
      // TODO 针对多个子表
      const _columns = Object.values(this.subForms[0].columns)
      let obj = {}
      _columns.map(cell => {
        obj[cell.name] = {...cell}
      })
      return obj
    },
    viewer () {
      return {
        main: Object.keys(this.columns)
      }
    },
    tableList () {
      return this.viewer.main
    },
    // instaceId () {
    //   // 目前只考虑1个子表
    //   return this.subDatas[this.subForms[0].name][0].stepInstanceId
    // },
    toolBar () {
      return this.hasRightToEdit ? this.toolbarList : []
    }
  },
  methods: {
    initForm () {
      // 目前只是支持单一子表
      const subDatas = this.subDatas
      // console.log('subDatas-init:', subDatas)
      const subFormName = this.subForms[0].name
      this.tableData = subDatas && subDatas[subFormName].length ? Object.values(subDatas[subFormName]) : []
      this.instaceId = this.subDatas[subFormName][0].stepInstanceId
      // this.tableData = this.subDatas ? Object.values(this.subDatas[subFormName]) : []
      // this.subFormInsId = this.tableData[0].stepInstanceId
    }
  }
}
</script>

<style lang='sass' scoped>
.title-label
  background: #f6f6f6
  border-left: 5px solid #48b0f7
  padding: 0 5px
  margin-bottom: 10px
.dataTables
  /deep/ .data-table
    min-height: 100px
</style>
